<template>
    <div class="home">
        <el-row>
            <el-col :span="4">
                <el-input v-model="inputValue" placeholder="请输入内容">
                    <el-button slot="append" icon="el-icon-position" :disabled="dfsLoading" @click="sendMessage()"></el-button>
                </el-input>
                <div>
                    <p v-for="(item, i) in alertList" :key="i">{{item.title}}</p>
                </div>
            </el-col>
            <el-col :span="20">
                <iframe v-if="!dfsLoading" ref="dfs" class="dfs" src="http://192.168.1.22:8002" frameborder="0"></iframe>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    name: "Home",
    data() {
        return {
            inputValue: '',
            isReady: false,
            dfsLoading: false,
            alertList: []
        }
    },
    created() {
        this.messageMount()
        this.dfsLoading = true;
        this.alertList.push({
            title: 'DFS加载中...'
        })
        setTimeout(() => {
            this.dfsLoading = false
        }, 1000)
    },
    beforeDestroy() {
        this.messageUnMount()
    },
    methods: {
        messageMount() {
            window.addEventListener('message', this.handleMessage, false)
        },
        messageUnMount() {
            window.removeEventListener('message', this.handleMessage, false)
        },
        handleMessage(res) {
            if (window.location.origin !== res.origin) {
                this.msg = res.data;
                if (res.data === '0') {
                    this.isReady = true
                    this.alertList.push({
                        title: 'DFS加载完成'
                    })
                    this.sendToken()
                }
            }
        },
        sendMessage(msg) {
            if (this.isReady) {
                this.$refs.dfs.contentWindow.postMessage(msg ? msg : {
                    msg: this.inputValue
                }, '*')
                this.alertList.push({
                    title: `向DFS发送消息: ${msg ? JSON.stringify(msg) : this.inputValue}`
                })
            }
        },
        sendToken() {
            this.sendMessage({
                token: 'a7ed3695-d7f2-4c0e-af6e-ce258b0ec960'
            })
        }
    },
};
</script>

<style scoped lang="scss">
.home{
    .dfs{
        width: 100%;
        height: 100vh;
    }
}
</style>
